<!--
 * @Author: H.
 * @Date: 2021-09-15 18:39:27
 * @LastEditTime: 2021-11-24 17:05:49
 * @Description: 
-->
<template>
  <div>
    <h1>Input 示例</h1>
    <Demo :component="InputDemo1" />
    <Demo :component="InputDemo2" />
    <h2>Input Attributes</h2>
    <Table :dataSource="dataSource" :columns="columns" />
    <h2 style="margin-top: 30px">Input Events</h2>
    <Table :dataSource="dataSource1" :columns="columns1" />
  </div>
</template>

<script>
import InputDemo1 from './Demo/InputDemo1.vue'
import InputDemo2 from './Demo/InputDemo2.vue'
import Demo from './Demo/index.vue'
import Table from '../lib/table/Table.vue'

export default {
  components: {
    Demo,
    Table,
  },
  setup() {
    const dataSource = [
      {
        id: 1,
        params: 'modelValue',
        illustrate: '绑定值',
        type: 'string',
        optional: '-',
        defaults: '-',
      },
      {
        id: 2,
        params: 'disabled',
        illustrate: '是否禁用',
        type: 'boolean',
        optional: '-',
        defaults: 'false',
      },
      {
        id: 3,
        params: 'readonly',
        illustrate: '原生属性，是否只读',
        type: 'boolean',
        optional: '-',
        defaults: 'false',
      },
      {
        id: 4,
        params: 'error',
        illustrate: '校验出错',
        type: 'string',
        optional: '-',
        defaults: '-',
      },
    ]
    const columns = [
      { title: '参数', prop: 'params', width: '300' },
      { title: '说明', prop: 'illustrate', width: '300' },
      { title: '类型', prop: 'type', width: '100' },
      { title: '可选值', prop: 'optional', width: '100' },
      { title: '默认值', prop: 'defaults' },
    ]

    const dataSource1 = [
      {
        id: 1,
        event: 'change',
        illustrate: '仅在输入框失去焦点或用户按下回车时触发',
        callbackParameter: '(event: Event)',
      },
      {
        id: 2,
        event: 'input',
        illustrate: '在 Input 值改变时触发',
        callbackParameter: '(event: Event)',
      },
      {
        id: 3,
        event: 'focus',
        illustrate: '在 Input 获得焦点时触发',
        callbackParameter: '(event: Event)',
      },
      {
        id: 4,
        event: 'blur',
        illustrate: '在 Input 失去焦点时触发',
        callbackParameter: '(event: Event)',
      },
    ]

    const columns1 = [
      { title: '事件名称', prop: 'event', width: '100' },
      { title: '说明', prop: 'illustrate', width: '300' },
      { title: '回调参数', prop: 'callbackParameter' },
    ]
    return {
      InputDemo1,
      InputDemo2,
      columns,
      dataSource,
      dataSource1,
      columns1,
    }
  },
}
</script>

<style></style>
